<fieldset class="layui-elem-field layui-field-title">
	<legend>预定客房</legend>
</fieldset>

<form class="layui-form">
	<div class="layui-form-item">
		<label class="layui-form-label">电话号码</label>
		<div class="layui-input-inline">
			<input type="text" name="phone" placeholder="输入电话号码" required
				lay-verify="required" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">姓名</label>
		<div class="layui-input-inline">
			<input type="text" name="name" placeholder="输入姓名" required
				lay-verify="required" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">身份证号</label>
		<div class="layui-input-inline">
			<input type="text" name="idcard" placeholder="输入身份证号" required
				lay-verify="required" class="layui-input">
		</div>
	</div>

	
	<input type="hidden" name="userId">
	
	 
	 <div class="layui-form-item">
		<label class="layui-form-label">房间</label>
	</div>


	<div class="layui-form-item">
		<label class="layui-form-label">入住时间</label>
		<div class="layui-input-inline">
			<input type="text" class="layui-input" name="start" id="start">
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">退房时间</label>
		<div class="layui-input-inline">
			<input type="text" class="layui-input" name="end" id="end">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">房间类型</label>
		<div class="layui-input-inline">
			<select name="type" lay-filter="type">
				<option value="">请选择房间类型</option>
				<option value="0">大床房</option>
				<option value="1">标准间</option>
				<option value="2">三人间</option>
			</select>
		</div>
	</div>
 	<div class="layui-form-item">
		<div class="layui-input-block">
			<button type="submit" class="layui-btn" lay-submit
				lay-filter="order-add">立即添加</button>
		</div>
	</div>

</form>

<table id="room-list" lay-filter="room-list">
</table>

<script>
	layui.use([ 'form', 'laydate', 'table' ], function() {
		var form = layui.form;
		var laydate = layui.laydate;
		var table = layui.table;
		//form.render();
		
		
		form.render();
		
		laydate.render({
			elem : '#start',
			type : 'datetime',
			done : function(value, date, endDate) {
				$("input[name='start']").val(value);
				queryRoom();
			}
		});
		laydate.render({
			elem : '#end',
			type : 'datetime',
			done : function(value, date, endDate) {
				$("input[name='end']").val(value);
				queryRoom();
			}
		});
		
		$("input[name='phone']").change(
				function() {
					var phone = $(this).val();
					$.ajax({
						url : '/api/user/search',
						data : {
							phone : phone
						},
						type : 'get',
						dataType : 'json',
						success : function(result) {
							if (result.code >= 0) {
								if (result.data && result.data.length > 0) {
									$("input[name='name']").val(
											result.data[0].name);
									$("input[name='idcard']").val(
											result.data[0].idcard);
									$("input[name='userId']").val(
											result.data[0].id);
								} else {
									//  清空userid 
									$("input[name='userId']").val("");
									layer.msg('未查询到相关用户');
								}
							} else {
								layer.msg(result.msg);
							}
						},
						error : function() {
							layer.msg('请求失败');
						}
					});
					// 过滤不正常的房间选项
					table.render({
						
						elem : '#room-list',
						page : true,
						url : '/api/room/query',
						cols : [ [ {
							type: 'radio',
							title : 'ID',
							field : 'id'
						}, {
							title : '房间号',
							field : 'number'
						}, {
							title : '类型',
							field : 'type',
							templet : function(d) {
								return [ '大床房', '标准间', '三人间' ][d.type];
							}
						}, {
							title : '描述',
							field : 'dscp'
						}, {
							title : '价格',
							field : 'price'
						}, {
							title : '状态',
							field : 'status',
							templet : function(d) {

								return [ '正常', '异常' ][d.status];
							}
						}, ] ],
						parseData : function(res) {
							return {
								code : res.code,
								msg : res.msg,
								count : res.data.total,
								data : res.data.list,
							};
						}
					});

				});
		
		form.on("select(type)",function(data){
			queryRoom();
		});
		function queryRoom() {
			var start = $("input[name='start']").val();
			var end = $("input[name='end']").val();
			var type=$("select[name='type']").val();
		    //	console.log(start);
			//console.log(end);
			table.reload('room-list', {
				where : {
					start : start,
					end : end,
					type: type
				},
				page : {
					cur : 1
				},
			});
		}
		
		form.on('submit(order-add)',function(data){
			var field = data.field;
			//console.log(field);
			var checkStatus = table.checkStatus('room-list');
			if(checkStatus.data.length){
				field.roomId = checkStatus.data[0].id;
			}
			if(!field.phone || field.phone.length!=11){
				layer.msg('电话必须是11位');
				return false;
			}
			
			if(!field.name || field.name.length< 2|| field.name.length>32){
				layer.msg('名字位于2位到32位之间');
				return false;
			}
			
			
			
			if(!field.idcard|| field.idcard.length!=18){
				layer.msg('身份证号必需是18位');
				return false;
			}
			
			if(!field.start){
				layer.msg('入住时间不能为空');
				return false;
			}
			
			if(!field.end){
				layer.msg('退房时间不能为空');
				return false;
			}
			if(field.start>=field.end){
				layer.msg('入住时间必须小于退房时间');
				return false;
			}
			if(!field.roomId){
				layer.msg('请必须选择一个房间');
				return false;
			}
			//console.log(field);
			$.ajax({
				url: '/api/order/add',
				data: field,
				type: 'post',
				dataType: 'json',
				success: function(result){
					console.log('AAAAAAAAAAAAA');
					if(result.code>0){
						layer.confirm('预定成功，继续预定',{btn: ['继续预定','跳转列表']},function(index){
							layer.close(index);
							$("input[name='start']").val('');
							$("input[name='end']").val('');
							queryRoom();
						},function(index){
							open('/order/list.html');
						});
					}else {
						layer.msg(result.msg);
					} 
				},
				error: function(){
					layer.msg('请求失败');
				}
			});
			return false;
		});
	});
</script>